<template>
  <a-modal
    :visible="visible"
    :title="'会员详情'"
    :footer="false"
    @cancel="$emit('update:visible', false)"
    @visible-change="handleVisibleChange"
    :mask-closable="true"
    modal-class="member-detail-modal"
    :width="700"
  >
    <div class="member-detail-container" v-if="member">
      <!-- 顶部信息区域 -->
      <div class="member-detail-header">
        <div class="avatar-container">
          <a-avatar :size="80" :style="{ backgroundColor: member.status ? '#00b42a' : '#f53f3f' }">
            {{ member.trueName ? member.trueName.substring(0, 1) : 'U' }}
          </a-avatar>
          <div class="status-badge" :class="{ active: member.status }">
            {{ member.status ? '已启用' : '已禁用' }}
          </div>
        </div>
        <div class="basic-info">
          <h2>{{ member.trueName || '未设置姓名' }}</h2>
          <div class="info-item">
            <icon-user />
            用户ID: {{ member.userId }}
          </div>
          <div class="info-item">
            <icon-mobile />
            {{ member.mobile }}
          </div>
          <div class="info-item">
            <icon-email />
            {{ member.email || '未设置邮箱' }}
          </div>
        </div>
        <div class="action-buttons">
          <a-button type="outline" status="success" @click="$emit('edit', member)">
            <template #icon>
              <icon-edit />
            </template>
            编辑
          </a-button>
          <a-button
            type="outline"
            :status="member.status ? 'danger' : 'success'"
            @click="$emit('toggleStatus', member)"
            style="margin-left: 8px"
          >
            <template #icon>
              <icon-poweroff v-if="member.status" />
              <icon-play-arrow-fill v-else />
            </template>
            {{ member.status ? '禁用' : '启用' }}
          </a-button>
        </div>
      </div>

      <!-- 详细信息区域 -->
      <a-divider />

      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="基本信息">
          <div class="detail-section">
            <div class="detail-row">
              <div class="detail-item">
                <div class="detail-label">性别</div>
                <div class="detail-value">{{ member.sex ? '男' : '女' }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">生日</div>
                <div class="detail-value">{{ member.birthday || '未设置' }}</div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-item">
                <div class="detail-label">固定电话</div>
                <div class="detail-value">{{ member.telephone || '未设置' }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">QQ</div>
                <div class="detail-value">{{ member.qq || '未设置' }}</div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-item">
                <div class="detail-label">地区</div>
                <div class="detail-value">{{ member.area || '未设置' }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">邮编</div>
                <div class="detail-value">{{ member.zip || '未设置' }}</div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-item full-width">
                <div class="detail-label">联系地址</div>
                <div class="detail-value">{{ member.contactAddr || '未设置' }}</div>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="2" title="账户信息">
          <div class="detail-section">
            <div class="detail-row">
              <div class="detail-item">
                <div class="detail-label">会员组</div>
                <div class="detail-value">{{ member.groupId || '默认组' }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">积分</div>
                <div class="detail-value">{{ member.point || 0 }}</div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-item">
                <div class="detail-label">经验值</div>
                <div class="detail-value">{{ member.exp || 0 }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">账户余额</div>
                <div class="detail-value">{{ member.balance ? `¥${member.balance}` : '¥0.00' }}</div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-item">
                <div class="detail-label">注册时间</div>
                <div class="detail-value">{{ member.time || '未知' }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">最后登录</div>
                <div class="detail-value">{{ member.lastLogin || '未登录' }}</div>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-item">
                <div class="detail-label">微信绑定</div>
                <div class="detail-value">
                  <a-tag color="green" v-if="member.openId">已绑定</a-tag>
                  <a-tag color="gray" v-else>未绑定</a-tag>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { MemberDetail } from '@/api/member'
import { IconUser, IconMobile, IconEmail, IconEdit, IconPoweroff, IconPlayArrowFill } from '@arco-design/web-vue/es/icon'

// 定义组件属性
const props = defineProps<{
  visible: boolean
  member: MemberDetail | null
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'edit', member: MemberDetail): void
  (e: 'toggleStatus', member: MemberDetail): void
}>()

// 处理对话框可见性变化
const handleVisibleChange = (val: boolean) => {
  emit('update:visible', val)
}
</script>

<style scoped lang="less">
@import '../styles/common.less';

:deep(.member-detail-modal) {
  .arco-modal-header {
    border-bottom: 1px solid #f2f3f5;
    padding-bottom: 12px;
  }

  .arco-tabs-header {
    margin-bottom: 0;
  }
}

.member-detail-container {
  .member-detail-header {
    display: flex;
    align-items: center;
    padding-bottom: 16px;

    .avatar-container {
      position: relative;
      margin-right: 20px;

      .status-badge {
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 12px;
        border-radius: 10px;
        font-size: 12px;
        background-color: #f53f3f;
        color: white;
        white-space: nowrap;
        min-width: 60px;
        text-align: center;

        &.active {
          background-color: #00b42a;
        }
      }
    }

    .basic-info {
      flex: 1;

      h2 {
        margin: 0 0 8px 0;
        font-size: 18px;
        color: #1d2129;
      }

      .info-item {
        margin-bottom: 6px;
        color: #4e5969;
        font-size: 14px;
        display: flex;
        align-items: center;

        .arco-icon {
          margin-right: 6px;
          font-size: 16px;
        }
      }
    }

    .action-buttons {
      margin-left: 20px;
    }
  }
}
</style>
<template